<template>
    <div class="filte">
        <van-sticky>
        <div class="filte-nav">
            <van-nav-bar
                title="分类"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        </van-sticky>
        <div class="filte-title">
            <div class="filte-title-top">
                <div class="item" :class="{active:styleId===item.id}" @click="onConfirm1(item.name,item.id)" v-for="(item,index) in allData" :key="index">{{item.name}}</div>
            </div>
            <div class="filter-title-bottom">
                <div class="filter-title-bottom-item1">
                    <div class="item1" :class="{active:areaId===item.id}" @click="onConfirm3(item.name,item.id)" v-for="(item,index) in screeAreas" :key="index">{{item.name}}</div>
                </div>
                <div class="filter-title-bottom-item1">
                    <div class="item1" :class="{active:isFinish===item.id}" @click="onConfirm4(item.name,item.id)" v-for="(item,index) in screeStatus" :key="index">{{item.name}}</div>
                </div>
                <div class="filter-title-bottom-item1">
                    <div class="item1" :class="{active:isFree===item.id}" @click="onConfirm5(item.name,item.id)" v-for="(item,index) in screePrices" :key="index">{{item.name}}</div>
                </div>
                <div class="filter-title-bottom-item1">
                    <div class="item1" :class="{active:order===item.id}" @click="change(item.name,item.id)" v-for="(item,index) in defaultData" :key="index">{{item.name}}</div>
                </div>
            </div>
        </div>
        <div class="a">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :immediate-check="false"
                @load="onLoad"
            >
        <div class="filter-container">
            <div class="filter-container-box" @click="gotoUser(item)" v-for="(item,index) in getSerachData" :key="index">
                  <div class="filter-container-img">
                    <img v-lazy="item.vertical_cover" alt="" />
                  </div>
                  <div class="filter-container-title auto-text">{{item.title}}</div>
                  <div v-if="item.is_finish===1" class="filter-container-name">完结共{{item.total}}话</div>
                  <div v-if="item.is_finish===0" class="filter-container-name">更新至{{item.total}}话</div>
            </div>
        </div>
        </van-list>
        </div>

    </div>
</template>

<script>
    export default {
        name:"Filte",
        data(){
            return{
                loading:false,
                finished:false,

                IsLongding:false,

                pageNum:1,
                // 标识符
                styleId:-1,
                areaId:-1,
                isFinish:-1,
                order:-1,
                isFree:-1,
                
                // 数据
                defaultData:[],
                allData:[],
                screeAreas:[],
                screePrices:[],
                screeStatus:[],

                getSerachData:[],
            }
        },
        created(){
            this.getFilteData();

            this.screeData();
        },
        methods:{
            onClickLeft() {
                this.$router.go(-1)
            },
            onLoad(){
                this.pageNum++;
                this.axios({
                    methods:'GET',
                    url:"ClassPage",
                    params:{
                        styleId:this.styleId,
                        areaId:this.areaId,
                        isFinish:this.isFinish,
                        order:this.order,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        isFree:this.isFree,
                    }
                }).then(res=>{
                    
                    if(res.data.data.length===0){
                        // this.$toast('暂没内容');
                        this.finished = true;
                        return;
                    }
                    this.IsLongding = true
                    this.loading = false;
                    this.getSerachData.push(...res.data.data)
                }).catch(err=>{
                
                })
            },
            getFilteData(){
                this.axios({
                    methods:"GET",
                    url:'AllLabel',
                    params:{}
                }).then(result=>{
                    this.defaultData = result.data.data.orders;
                    this.defaultData.unshift({id: -1,name: "默认推荐"})

                    this.allData = result.data.data.styles;
                    this.allData.unshift({id:-1,name:"全部"})

                    this.screeAreas = result.data.data.areas;
                    this.screeAreas.unshift({id:-1,name:"全部"});

                    this.screePrices = result.data.data.prices;
                    this.screePrices.unshift({id:-1,name:"全部"});

                    this.screeStatus = result.data.data.status;
                    this.screeStatus.unshift({id:-1,name:"全部"});
                })
            },

                // 筛选请求
            screeData(){
            //   发起请求
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                });
                this.axios({
                    methods:'GET',
                    url:"ClassPage",
                    params:{
                        styleId:this.styleId,
                        areaId:this.areaId,
                        isFinish:this.isFinish,
                        order:this.order,
                        pageNum:this.pageNum,
                        pageSize:this.pageSize,
                        isFree:this.isFree,
                    }
                }).then(res=>{
                    
                     this.$toast.clear();
                    if(res.data.data.length===0){
                        // this.$toast('暂没内容');
                        this.finished = true;
                        return;
                    }
                    this.IsLongding = true
                    this.loading = false;
                    this.getSerachData = res.data.data;
                }).catch(err=>{
                
                })
            },

            change(value,id) {
                if(this.order === id){
                    return
                }
                this.order = id;
                this.defaultName = value;
                this.screeData()
            },
            onConfirm1(value,id){
                if(this.styleId === id){
                    return
                }
                this.styleId = id;
                this.allName = value;

                this.screeData()
            },
            onConfirm3(value,id){
                if(this.areaId === id){
                    return;
                }
                this.areaId = id;
                this.screeAreasName = value;

                this.screeData()
            },
            onConfirm4(value,id){
                if(this.isFinish === id){
                    return;
                }
                this.isFinish = id;
                this.screeStatusName = value;
                //   发起请求
                this.screeData()
            },
            onConfirm5(value,id){
                if(this.isFree === id){
                    return;
                }
                this.isFree = id;
                this.screePricesName = value;
                //   发起请求
                this,this.screeData()
            },

            // 跳转页面
            gotoUser(item){
                this.$router.push({name:'CartoonContainer',query:{id:item.id}})
            }
        }
    }
</script>

<style lang="less" scoped>
    .loading{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    /deep/.van-icon-arrow-left:before{
        color: #666;
        font-weight: bold;
        font-size: 19px;
    }
    /deep/.van-nav-bar__title{
        color: #1F1F1F;
    }
    .filte-title{
        padding: 10px;
        .filte-title-top{
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 10px;
            border-bottom: 1px solid #F2F2F2;
            .item{
                padding: 10px;
                text-align: center;

            }
        }
        .filter-title-bottom{
            // padding-bottom: 10px;
            border-bottom: 1px solid #F2F2F2;
            .filter-title-bottom-item1{
                display: flex;
                .item1{
                    padding: 10px;
                }
            }
            
        }
    }
    .active{
        color: #33AAFA;
    }
    .filter-container{
        padding: 0px 10px;
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 20px);
        .filter-container-box{
            width: calc(33.33% - 8px + 8px / 3);
            margin-bottom: 10px;
            margin-right: 8px;
            .filter-container-img{
                width: 100%;
                height: 150px;
                border-radius: 5px;
                overflow: hidden;
                >img{
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
            .filter-container-title{
                width: 100%;
                padding-top: 5px;
            }
            .filter-container-name{
                color: #9c9ba1;
            }
        }
        .filter-container-box:nth-child(3n){
            margin-right: 0px;
        }

    }
    .a{
        // height: calc(100vh - 294px);
        // overflow-y: auto;
    }
</style>